<template>
  <div style="height:100%">
    <div style="height:100%">
      <div style="color:#fff;font-size:1.6rem;margin-bottom:1%">工程计量款统计</div>
      <div class="flexEndCenter" style="height:2rem;margin-bottom:2rem">
        <div style="background:#0ADEFF;width:2.5rem;margin-right:1.5rem;height:1.5rem"></div>
        <div style="color:#fff">工程计量款（万元）</div>
      </div>
      <div style="height:80%">
        <ul>
          <li
            v-for="(item,index) in peopleData"
            :key="index"
            style="margin-bottom:1.2rem;color:#fff;"
          >
            <div class="flexStart">
              <div style="width:9rem;text-align:right;font-size:1.6rem">{{item.name}}</div>
              <div class="barDiv">
                <div class="barDiv-active" :style="'width:'+(item.num/50)*35+'rem'"></div>
              </div>
              <div style="color:#fff;margin-left:2rem">{{item.num}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      peopleData: [
        { name: 'PGK-NT4', num: 50 },
        { name: 'PGK-NT4', num: 30 },
        { name: 'PGK-NT4', num: 20 },
        { name: 'PGK-NT4', num: 10 },
        { name: 'PGK-NT4', num: 30 },
        { name: 'PGK-NT4', num: 30 },
        { name: 'PGK-NT4', num: 20 },
        { name: 'PGK-NT4', num: 10 },
        { name: 'PGK-NT4', num: 30 }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  overflow: auto;
  height: 90%;
  width: 52rem;
  margin: 0 auto;
}
ul::-webkit-scrollbar {
  display: none;
}
.barDiv {
  width: 35rem;
  height: 2rem;

  margin-left: 1rem;
}
.barDiv-active {
  background: #0adeff;
  // border-radius: 0.6rem;
  height: 2rem;
}
.flexStart {
  align-items: center;
}
</style>